<template>
  <div class="links">
    <Head aIndex="5"></Head>
    <!-- 内容 -->
    <div>
        <el-card class="box-card link_message" >
            <h4 style="text-align: center;font-size: 20px;">加入友链须知</h4>
            <div>
              <h4 style="font-size: 16px;font-weight:bold;">注意事项：</h4>
              <p  style="font-size: 15px;margin-left:20px;">网站能长期正常访问(如访问不了了需发邮箱联系我)</p>
              <p  style="font-size: 15px;margin-left:20px;">如需交换友链，请先将本站添加到您的网站中，再根据下面的格式，发邮箱联系我</p>
              <h4 style="font-size: 16px;font-weight:bold;">申请格式：</h4>
              <p  style="font-size: 15px;margin-left:20px;">博客标题：xxx</p>
              <p  style="font-size: 15px;margin-left:20px;">博客地址：xxx</p>
              <p  style="font-size: 15px;margin-left:20px;">图片：xxx</p>
            </div>
         </el-card>


        <div v-model="BlogLinks" class="grid-content content bg-purple blog_bg ">
            
            <el-row :gutter="20">
                <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size:20px;">友情链接</div></el-col>
                <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:20px;">共
                    <span style="font-size: 28px;color: rgb(6, 154, 240);">{{length}}</span> 个</div>
                </el-col>
            </el-row>
                
            <div style="background-color: #DCDFE6;height: 1px;margin: 5px 0;"></div>

            <!-- 分割线 -->
            <!-- <div  style="height:3px; margin: 5px 0; border:none; border-top:3px solid  #1eb9e0;"></div> -->
            <div style="width: 80%;margin: auto; margin-top: 2%;" v-for="(item,indexLink) in BlogLinks" :key="indexLink">
                 <a :href="item.blogAddress" >
                  <el-card shadow="hover" >
                    <el-row :gutter="15">
                        <el-col :span="5">
                        <div v-lazy-container="{ selector: 'img' }">
                            <!-- <img :src="item.pictureAddress" width="50" height="50"> -->
<!--                            <el-image -->
<!--                            style="width: 100%; height: 100%"-->
<!--                            :src="item.pictureAddress"-->
<!--                            >-->
<!--                            </el-image>-->
                          <img
                            style="width: 100%; height: 100%"
                            :data-src="item.pictureAddress"
                          />
                        </div>
                        </el-col>
                        <el-col :span="19">
                        <div>
                            <p style="font-size: 15px;line-height: 0; font-weight:bold;">{{item.blogName}}
                            </p>
                            <p style="font-size: 13px;display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; ">
                               {{item.blogAddress}}
                            </p>
                             <el-tag size="mini"><p style="font-size: 10px;line-height: 0; font-weight: normal;">  {{item.createTime}}</p></el-tag>
                            <!-- <p style="font-size: 10px;line-height: 0;"><el-link style="font-size: 5px;" :underline="false">回复</el-link></p> -->
                        </div>
                        </el-col>
                    </el-row> 
               </el-card>
             </a>
            </div>
        </div>
    </div>

    <div style="height:180px;"></div>

<!--    <div class="kong"></div>-->
    <Foot class="foot"></Foot>
  </div>
</template>

<script>
import Head from '@/components/Head'
import Foot from '@/components/Foot'

export default {
  name: 'BlogLinks',
  components:{ Head,Foot },
  data () {
   return {
    BlogLinks:'',
    length: '',
   }
  },
  mounted() {
      this.initLinks()
  },
  methods:{
    initLinks(){
        const _this = this
        this.axios.get('/links/getAllLink').then(resp=>{
            // console.log(resp)
            _this.BlogLinks = resp.data.obj
            _this.length = resp.data.obj.length
        })
    }
  }
}
</script>

<style scoped>
    .links{
      min-height: 160vh;
      position: relative;
    }

    .blog_bg{
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 50%;
      margin-top: 2% !important;
      margin-bottom: 5% !important;
      margin: auto;
      min-height: 500px;
      padding:20px 0;
    }

    /*@media screen and (max-width: 800px){*/
    /*  .blog_bg{*/
    /*    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
    /*    width: 90%;*/
    /*    margin-top: 2% !important;*/
    /*    margin-bottom: 5% !important;*/
    /*    margin: auto;*/
    /*    min-height: 500px;*/
    /*    padding:20px 0;*/
    /*  }*/
    /*  .link_message[data-v-6c380e26]{*/
    /*    width:90%;*/
    /*    font-size:60px;*/
    /*  }*/
    /*}*/

    .link_message{
        width: 50%;
        margin-top: 2% !important;
        margin: auto;
    }

    .foot{
      position: absolute;
      bottom: 0;
      left: 0;
      width:100%;
      /*index:999;*/
    }

    /*.kong{*/
    /*  height: 350px;*/
    /*}*/
</style>